<template>
  <div class="_wz_semicircleCharts">
    <div id="semicircleCharts"></div>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch
} from 'vue'
import {useRouter, useRoute} from "vue-router";


import {useMainStore} from '../../../store'  //pinia 使用 类似 vuex
import {storeToRefs} from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import * as echartsGL from 'echarts-gl' // 引入echarts


//reactive
export default defineComponent({
  name: 'semicircleCharts',//组件名称
  components: {
  },//组件引用
  setup(props, context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $echarts = inject('$echarts');//引用echarts
    const $common = inject('$common');//自己封装的方法

    const state = reactive({

    });


    //页面初始化加载数据
    const loadData = () => {
      var chartDom = document.getElementById('semicircleCharts');
      state.chartsYu = $echarts.init(chartDom);

      let series = [];
      let dataList = [
        {name:'国五',value:10},
        {name:'国六',value:50},
        {name:'国七',value:110},
      ]
      let total = 0;
      dataList.map((k,i)=>{
        total = k.value + total;
      })
      dataList.map((k,i)=>{

        let data = [
          {"name":k.name,"value":k.value},
          {"name":'',"value":total - k.value},
          {"value":total,"itemStyle":{"color":"none","decal":{"symbol":"none"}},"label":{"show":false}}
        ]

        series.push({
          "name":"",
          "type":"pie",
          "roseType":"",
          "radius":["80%","90%"],
          "startAngle":180,
          left: (100 / dataList.length * i) + '%',
          right: (100 / dataList.length * (dataList.length - i - 1)) + '%',
          top: 0,
          bottom: 0,
          data,
          roundCap: true,
          "label":{"show":false,"formatter":"{b} 数值：{c} 占比：{d}% "}
        })
      })



      let option = {
        color:["#2d8cf0","#eaeef2","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        series:series
      };


      state.chartsYu.setOption(option);
      state.chartsYu.resize();

    }



    // 其他的生命周期
    onBeforeMount(() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted(() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData();//页面初始化加载数据
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated(() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount(() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style scoped lang="less">
._wz_semicircleCharts{
  width: 100%;
  height: 100%;
  #semicircleCharts{
    width: 100%;
    height: 100%;
  }
}
</style>
